<template>
  <div id="editassess" style="overflow:hidden">
        <el-form :model="editUnitForm" label-width="100px" ref="editUnitForm" :inline="true" style="padding:10px 0 0;clear:both">
                <div style="float:left;padding:9px 0 0 20px;">单位编码：{{editUnitForm.unitcode}}</div>
                  <el-form-item label="单位名称" prop="unitname" :rules="{ required: true, message: '请输入单位名称', trigger: 'blur' }">
                    <el-autocomplete style="width:400px" v-model="editUnitForm.unitname" :fetch-suggestions="querySearch" placeholder="请输入单位名称关键字" :trigger-on-focus="false"  @select="handleSelect"></el-autocomplete>
                  </el-form-item>
                  <div style="clear:both"></div>
                  <!-- <el-form-item label="主管领导" prop="inmanagleader" :rules="{ required: true, message: '请输入主管领导姓名', trigger: 'blur' }">
                    <el-input v-model="editUnitForm.inmanagleader" placeholder="请输入主管领导姓名"></el-input>
                  </el-form-item> -->
        </el-form>
            <div v-show="preferments&&preferments.length>0" >
          <!-- <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" :on-success="getImportList" name="file" :file-list="fileList"
              :action="this.$http.defaults.baseURL + 'api/prj/exceldata'" with-credentials :on-error='uploaderror' accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" >
            <el-button type="success" icon="el-icon-document" style="margin:10px 10px 0;">初始化提拔人员名单</el-button>
          </el-upload> -->
             <h1>试用期满测评人员</h1>
              <table class="mytable1" cellspacing="0" cellpadding="0">
                <tr>
                  <th width='150'>编码</th>
                  <th width='200'><font color=red>*</font> 姓名</th>
                  <!-- <th width='300'><font color=red>*</font> 出生年月</th> -->
                  <th width='200'><font color=red>*</font> 身份证号</th>
                  <!-- <th width='300'><font color=red>*</font>原职务</th> -->
                  <th width='300'><font color=red>*</font>职务</th>
                  <!-- <th><font color=red>*</font>任职时间</th> -->
                </tr>
              </table>
              <el-form :model="item" label-width="100px" :ref="'editLeader2Form'+index" :inline="true" v-for="(item,index) in preferments" :key="'leader2'+index">
                <table class="mytable1" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width='150' style="text-align:center;padding-top:15px;">{{item.code}}</td>
                    <td width='200'>
                      <el-form-item label="" prop="inname" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
                        <el-autocomplete v-model="item.inname" :fetch-suggestions="querySearchLeaders" @select="handleSelectLeaders($event, index)" :trigger-on-focus="false">
                          <template slot-scope="{ item }">
                            {{ item.value }}：{{ item.inxianzhiwu }}({{ item.inidnumber }})
                          </template>
                        </el-autocomplete>
                      </el-form-item>
                    </td>
                    <!-- <td width='300'>
                      <el-form-item label="" prop="inchusheng" :rules="{ required: true, message: '请输入出生年月', trigger: 'blur' }">
                        <el-date-picker
                          v-model="item.inchusheng"
                          type="month"
                          placeholder="选择出生年月"
                          value-format="yyyy-MM">
                        </el-date-picker>
                      </el-form-item>
                    </td> -->
                    <td width='200'>
                      <el-form-item label="" prop="inidnumber" :rules="{ required: true, message: '请输入身份证号', trigger: 'blur' }">
                        <el-input v-model="item.inidnumber"></el-input>
                      </el-form-item>
                    </td>
                    <!-- <td width='300'>
                      <el-form-item label="" prop="inyuanzhiwu" :rules="{ required: true, message: '请输入原职务', trigger: 'blur' }">
                        <el-input v-model="item.inyuanzhiwu"></el-input>
                      </el-form-item>
                    </td> -->
                    <td width='300'>
                      <el-form-item label="" prop="inxianzhiwu" :rules="{ required: true, message: '请输入职务', trigger: 'blur' }">
                        <el-input v-model="item.inxianzhiwu"></el-input>
                      </el-form-item>
                    </td>
                    <!-- <td>
                      <el-form-item label="" prop="inrenzhishijian" :rules="{ required: true, message: '请输入任职时间', trigger: 'blur' }">
                        <el-date-picker
                          v-model="item.inrenzhishijian"
                          type="month"
                          placeholder="选择任职时间"
                          value-format="yyyy-MM">
                        </el-date-picker>
                      </el-form-item>
                    </td> -->
                  </tr>
                </table>
              </el-form>
            </div>
            <div style="margin:10px">
              <el-button type="primary" @click.native="editDataFormSubmit" :loading="saveloading">保存</el-button>
            </div>
  </div>
</template>

<script>
export default {
  watch: {
    myid: {
      handler (val) {
        console.log('myid:' + val)
        this.getDetails(val)
      },
      immediate: true
    }
  },
  props: {
    myid: ''
  },
  data () {
    return {
      unitLeaders: [],
      fileList: [],
      errortext: '',
      editUnitForm: {
        unitcode: '',
        unitname: '',
        name: '',
        inmanagleader: ''
      },
      leaders: [],
      preferments: [],
      editDataFormLoading: false,
      editDataFormRules: {
      },
      saveloading: false
    }
  },
  methods: {
    setdata (data) {
      this.preferments.forEach((item, index) => {
        this.preferments[index].inname = ''
        this.preferments[index].inchusheng = ''
        this.preferments[index].inyuanzhiwu = ''
        this.preferments[index].inxianzhiwu = ''
        this.preferments[index].inrenzhishijian = ''
      })
      this.preferments.forEach((item, index) => {
        if (data.length >= index + 1) {
          this.preferments[index].inname = data[index].Name
          this.preferments[index].inchusheng = data[index].Chusheng
          this.preferments[index].inyuanzhiwu = data[index].Yuanzhiwu
          this.preferments[index].inxianzhiwu = data[index].Xianzhiwu
          this.preferments[index].inrenzhishijian = data[index].Shijian
        }
      })
    },
    // 获取列表
    getImportList (res) {
      if (res.success) {
        this.$message({
          message: '导入成功！',
          type: 'success'
        })
        this.setdata(res.content)
      } else {
        console.log(res.Msg)
        this.$message({
          message: '导入失败:' + res.message,
          type: 'error'
        })
      }
      this.fileList = []
    },
    exportticket () {
      window.open(this.$http.defaults.baseURL + 'api/prj/wordfile/' + this.myid)
    },
    str2zhiwu (str) {
      if (str === '正职') {
        str = '正职（主要）领导'
      }
      if (str === '副职') {
        str = '副职领导'
      }
      return str
    },
    handleSelect () {
      let para = {
        unitname: this.editUnitForm.unitname
      }
      this.$http
        .post(`/api/prj/initdata/`, para)
        .then(response => {
          this.unitLeaders = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    querySearch (queryString, cb) {
      return this.getunits(this, queryString, cb)
    },
    getunits (self, queryString, cb) {
      let para = {
        unitname: queryString
      }
      self.$http
        .post(`/api/prj/searchunit/`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data
          let newArr = []
          if (results && results !== '') {
            results.forEach(function (item) {
              let obj = {'value': item}
              newArr.push(obj)
            })
            cb(newArr)
          } else {
            cb(newArr)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    querySearchLeaders (queryString, cb) {
      return this.getLeaders(this, queryString, cb)
    },
    getLeaders (self, queryString, cb) {
      // let para = {
      //   unitname: queryString
      // }
      let returnArr = []
      if (this.unitLeaders && this.unitLeaders.length > 0) {
        returnArr = this.unitLeaders.map(item => {
          let myjson = {value: item.A0101, inidnumber: item.A0184, inxianzhiwu: item.A0215A}
          return myjson
        })
        let fiArr = returnArr.filter(item => item.value.indexOf(queryString) > -1)
        if (fiArr.length > 0) {
          cb(fiArr)
        } else {
          cb()
        }
      } else {
        cb(returnArr)
      }
    },
    handleSelectLeaders (item, index) {
      console.log('item')
      console.log(item)
      console.log('index')
      console.log(index)
      this.preferments[index].inidnumber = item.inidnumber
      this.preferments[index].inxianzhiwu = item.inxianzhiwu
    },
    beforeAvatarUpload (file) {
      console.log('文件类型')
      console.log(file.name)
      const isXLS = file.name.indexOf('.xls') > 0
      const isXLSX = file.name.indexOf('.xlsx') > 0
      // const isLt5M = file.size / 1024 / 1024 < 500
      if (!isXLS && !isXLSX) {
        this.$message.error('上传文件只能是 xls/xlsx 格式!')
      }
      // if (!isLt5M) {
      //   this.$message.error('上传文件大小不能超过 500MB!')
      // }
      // return isZIP && isLt5M
      return isXLS || isXLSX
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，如有多个文件请压缩为zip文件打包上传。`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getImportList()
    },
    importPersons () {
      this.getImportList()
    },
    uploaderror (err) {
      console.log('具体错误')
      console.log(err)
      this.$message({
        message: '导入失败，可能是文件大小超出系统限制:' + err,
        type: 'error'
      })
    },
    datadownload (id) {
      window.open(this.$http.defaults.baseURL + 'admin/binfo/download')
    },
    getDetails () {
      this.$http
        .get(`/api/prj/details/` + this.myid)
        .then(response => {
          this.editUnitForm.unitcode = response.data.project.code
          this.editUnitForm.unitname = response.data.project.inname
          this.editUnitForm.inmanagleader = response.data.project.inmanagleader
          this.leaders = response.data.leaders
          this.preferments = response.data.preferments
          console.log('leaders')
          console.log(this.leaders)
          if (this.editUnitForm.unitname && this.editUnitForm.unitname !== '') {
            this.handleSelect()
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    editDataFormSubmit () {
      let newArr = []
      let _this = this
      checkform('editUnitForm')
      this.leaders.forEach((item, index) => {
        checkform2('editLeader1Form' + index)
      })
      this.preferments.forEach((item, index) => {
        checkform2('editLeader2Form' + index)
      })
      if (checkAll()) {
        this.editSubmit()
      }
      function checkform (arr) {
        console.log(arr)
        _this.$refs[arr].validate((valid) => {
          if (valid) {
            newArr.push(true)
          } else {
            newArr.push(false)
          }
        })
        return true
      }
      function checkform2 (arr) {
        // console.log(arr)
        _this.$refs[arr][0].validate((valid) => {
          if (valid) {
            newArr.push(true)
          } else {
            newArr.push(false)
          }
        })
        return true
      }
      function checkAll () {
        console.log(newArr)
        for (let item in newArr) {
          if (!newArr[item]) {
            return false
          }
        }
        return true
      }
    },
    editSubmit () {
      let leadersinname = []
      let leadersidnumber = []
      let leaderszhiwu = []
      let prefermentsinname = []
      let prefermentsinchusheng = []
      let prefermentsidnumber = []
      let prefermentsxianzhiwu = []
      let prefermentsyuanzhiwu = []
      let prefermentsrenzhishijian = []
      this.leaders.forEach((item, index) => {
        leadersinname.push(item.inname)
        leadersidnumber.push(item.inidnumber)
        leaderszhiwu.push(item.inzhiwu)
      })
      this.preferments.forEach((item, index) => {
        prefermentsinname.push(item.inname)
        prefermentsinchusheng.push(item.inchusheng)
        prefermentsidnumber.push(item.inidnumber)
        prefermentsyuanzhiwu.push(item.inyuanzhiwu)
        prefermentsxianzhiwu.push(item.inxianzhiwu)
        if (item.inrenzhishijian) {
          prefermentsrenzhishijian.push(item.inrenzhishijian)
        } else {
          prefermentsrenzhishijian.push('')
        }
      })
      let para = {
        id: this.myid,
        inname: this.editUnitForm.unitname,
        leadersinname: leadersinname,
        leadersinidnumber: leadersidnumber,
        leadersinzhiwu: leaderszhiwu,
        prefermentsinname: prefermentsinname,
        prefermentsinchusheng: prefermentsinchusheng,
        prefermentsinidnumber: prefermentsidnumber,
        prefermentsinyuanzhiwu: prefermentsyuanzhiwu,
        prefermentsinxianzhiwu: prefermentsxianzhiwu,
        prefermentsinrenzhishijian: prefermentsrenzhishijian,
        inmanagleader: this.editUnitForm.inmanagleader
      }
      let _this = this
      this.saveloading = true
      this.$http
        .post(`/api/prj/edit/`, para)
        .then(function (response) {
          if (response.data.success === true) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
            _this.$router.push('/probation/')
          } else {
            _this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
          _this.saveloading = false
        })
        .catch(function (error) {
          _this.$message({
            message: '保存失败:' + error,
            type: 'error'
          })
          _this.saveloading = false
        })
    }
  },
  mounted () {
  }
}
</script>
<style>
#editassess .el-upload-list__item{
  width: 250px;
}
#editassess a{
  width: 200px;
}
  .mytable{
    border-top: 1px solid #95B8E7;
    border-left: 1px solid #95B8E7;
    margin:0 10px 10px;
    width: calc(100% - 20px);
  }
  .mytable th{
    padding: 13px 5px 0;
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
    vertical-align: top;
    line-height: 150%;
    background: #FAFAFA;
    width:200px;
    text-align:right;
  }
  .mytable td{
    padding: 5px;
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
    vertical-align: top;
    line-height: 150%;
  }
  .mytable1{
    border-left: 1px solid #95B8E7;
    margin:0 10px;
    width: calc(100% - 20px);
  }
  .mytable1 th{
    border-top: 1px solid #95B8E7;
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
    vertical-align: top;
    line-height: 150%;
    background: #FAFAFA;
    padding: 5px;
  }
  .mytable1 td{
    padding: 5px;
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
    vertical-align: top;
    line-height: 150%;
  }
#editassess h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-top: 1px solid #95B8E7;
    border-left: 1px solid #95B8E7;
    border-right: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:10px 10px 0;
}
#editassess .el-input__inner{
  border-top:0;
  border-left:0;
  border-right:0;
  border-radius:0;
}
</style>
